import VXETable from 'vxe-table'
import InputNumber from '../../../components/InputNumber'
import { handlePropsMethod } from '../../../utils'
import isNumber from 'lodash/isNumber'

VXETable.renderer.add('Number', {
  autofocus: '.el-input__inner',
  renderEdit(h, renderOpts, params) {
    const { options = {}, events = {} } = renderOpts
    const { row, column, $table } = params

    const _options = handlePropsMethod(options, params, [
      'min',
      'max',
      'disabled'
    ])

    const handleChange = cellValue => {
      events?.onChange?.({ cellValue, ...params })
      $table.updateStatus(params)
    }
    return [
      <InputNumber
        v-model={row[column.property]}
        onChange={handleChange}
        options={_options}
      />
    ]
  },
  renderCell(h, renderOpts, params) {
    const { formatter, options = {} } = renderOpts
    const { row, column } = params
    const { precision } = options
    const cellValue = row[column.property]
    const content = formatter
      ? formatter({ cellValue, row, column })
      : cellValue

    return [
      <span>
        {isNumber(content) && isNumber(precision)
          ? content.toFixed(precision)
          : content}
      </span>
    ]
  }
})

/** @type { Column } */
export const options = {
  showOverflow: 'tooltip',
  align: 'center'
}
